import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:flutter_demo/components/cu_navigation_bar/cu_navigation_bar.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_riverpod/legacy.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';

enum Calendar { day, week, month, year }

final _calendarViewProvider = StateProvider<Calendar>((ref) => Calendar.day);
final _progressValueProvider = StateProvider.autoDispose<double>((ref) => 0.5);

class ComponentPage extends ConsumerWidget {
  ComponentPage({super.key});

  final List<ButtonSegment<Calendar>> btnList = [
    ButtonSegment<Calendar>(
      value: Calendar.day,
      label: Text('Day'),
      icon: Icon(Icons.calendar_view_day),
    ),
    ButtonSegment<Calendar>(
      value: Calendar.week,
      label: Text('Week'),
      icon: Icon(Icons.calendar_view_week),
    ),
    ButtonSegment<Calendar>(
      value: Calendar.month,
      label: Text('Month'),
      icon: Icon(Icons.calendar_view_month),
    ),
    ButtonSegment<Calendar>(
      value: Calendar.year,
      label: Text('Year'),
      icon: Icon(Icons.calendar_today),
    ),
  ];
  void _onSelectionChanged(Set<Calendar> value, WidgetRef ref) {
    ref.read(_calendarViewProvider.notifier).state = value.first;
  }

  // int drawerIndex = 0;
  final _drawerIndex = StateProvider<int>((ref) => 0);
  final _isCheckbox = StateProvider<bool>((ref) => false);
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final calendarView = ref.watch(_calendarViewProvider);
    final drawerIndex = ref.watch(_drawerIndex);
    final isCheckbox = ref.watch(_isCheckbox);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text('小部件演示'),
        scrolledUnderElevation: 4.0,
        shadowColor: Colors.red[400],
        // bottom:  TabBar(
        //   controller: _tabController,
        //   tabs: const <Widget>[
        //     Tab(icon: Icon(Icons.cloud_outlined)),
        //     Tab(icon: Icon(Icons.beach_access_sharp)),
        //     Tab(icon: Icon(Icons.brightness_5_sharp)),
        //   ],
        // ),
      ),
      // floatingActionButton: FloatingActionButton.extended(
      //   onPressed: () {},
      //   icon: Icon(Icons.add),
      //   label: Text("类型六"),
      // ),
      // floatingActionButton: FloatingActionButton.small(
      //   onPressed: () {
      //     Scaffold.of(context).openDrawer();
      //   },
      //   child: Icon(Icons.menu),
      // ),
      // floatingActionButton: Builder(
      //   builder: (innerContext) {
      //     return FloatingActionButton.small(
      //       onPressed: () {
      //         Scaffold.of(innerContext).openDrawer();
      //       },
      //       child: Icon(Icons.menu),
      //     );
      //   },
      // ),
      floatingActionButtonLocation: FloatingActionButtonLocation.miniStartTop,
      drawer: NavigationDrawer(
        header: const Text("头部"),
        footer: const Text("底部"),
        backgroundColor: Color.fromRGBO(122, 0, 0, 1),
        // 选中项颜色（官方支持的 indicatorColor）
        indicatorColor: Colors.blue[200],
        // 选中项形状（官方支持的 indicatorShape）
        indicatorShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.w),
        ),
        // 菜单项内边距（官方支持的 tilePadding，调整间距）
        tilePadding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
        onDestinationSelected: (int i) {
          ref.read(_drawerIndex.notifier).state = i;
        },
        selectedIndex: drawerIndex,
        children: [
          NavigationDrawerDestination(
            icon: Icon(Icons.home, color: Colors.white), // 未选中图标（适配红色背景）
            label: Text("item菜单项1", style: TextStyle(color: Colors.white)),
          ),
          NavigationDrawerDestination(
            icon: Icon(Icons.settings, color: Colors.white),
            label: Text("item菜单项2", style: TextStyle(color: Colors.white)),
          ),
          NavigationDrawerDestination(
            icon: Icon(Icons.info, color: Colors.white),
            label: Text("item菜单项3", style: TextStyle(color: Colors.white)),
          ),
          NavigationDrawerDestination(
            icon: Icon(Icons.help, color: Colors.white),
            label: Text("item菜单项4", style: TextStyle(color: Colors.white)),
          ),
          NavigationDrawerDestination(
            icon: Icon(Icons.notifications, color: Colors.white),
            label: Text("item菜单项5", style: TextStyle(color: Colors.white)),
          ),
          NavigationDrawerDestination(
            icon: Icon(Icons.logout, color: Colors.white),
            label: Text("item菜单项6", style: TextStyle(color: Colors.white)),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ElevatedButton(onPressed: () {}, child: Text("类型一")),
            FilledButton(onPressed: () {}, child: Text("类型二")),
            FilledButton.tonal(onPressed: () {}, child: Text("类型三")),
            OutlinedButton(onPressed: () {}, child: Text("类型四")),
            TextButton(onPressed: () {}, child: Text("类型五")),
            IconButton(onPressed: () {}, icon: Icon(Icons.ac_unit)),
            SegmentedButton<Calendar>(
              segments: btnList,
              selected: <Calendar>{calendarView},
              onSelectionChanged: (Set<Calendar> value) =>
                  _onSelectionChanged(value, ref),
            ),
            Badge(
              label: Text(""),
              child: ElevatedButton(onPressed: () {}, child: Text("带徽章")),
            ),
            LinearProgressIndicator(value: null),
            FilledButton.tonalIcon(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: const Text('消息提示'),
                    action: SnackBarAction(
                      label: '关闭',
                      onPressed: () {
                        // Code to execute.
                      },
                    ),
                  ),
                );
              },
              label: Text("消息提示"),
              icon: Icon(Icons.info),
            ),
            TextButton(
              onPressed: () async {
                return showDialog(
                  context: context,
                  builder: (BuildContext ctx) {
                    return AlertDialog(
                      title: const Text('对话框标题'),
                      content: const Text('这是一个对话框内容'),
                      actions: <Widget>[
                        TextButton(
                          onPressed: () => ctx.pop(),
                          child: const Text('取消'),
                        ),
                        TextButton(
                          onPressed: () {
                            ctx.pop();
                          },
                          child: const Text('确定'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: const Text("打开一个对话框"),
            ),
            // 卡片
            Card(
              clipBehavior: Clip.hardEdge,
              color: Colors.grey[100],
              shadowColor: Colors.red[300],
              child: InkWell(
                splashColor: Colors.blue.withAlpha(30),
                onTap: () {
                  debugPrint('Card tapped.');
                },
                child: const SizedBox(
                  width: 300,
                  height: 100,
                  child: Center(child: Text('点击这个卡片')),
                ),
              ),
            ),
            // 分割线
            Container(
              color: Colors.green,
              child: Divider(
                height: 34.h,
                thickness: 10.w,
                indent: 10.w,
                endIndent: 10.w,
                color: Colors.red[300],
                radius: BorderRadius.all(Radius.circular(10.w)),
              ),
            ),

            /// 单个固定的行
            ListTile(
              leading: TextButton(
                onPressed: () {},
                child: SizedBox(
                  width: 100.w,
                  height: 40.h,
                  child: Row(
                    children: [Icon(Icons.arrow_back_sharp), Text("返回")],
                  ),
                ),
              ),
              title: const Text("主要标题"),
              subtitle: const Text("子标题"),
              trailing: const Icon(Icons.arrow_forward_outlined),
            ),

            /// 这是一个复选框
            Checkbox(
              value: isCheckbox,
              onChanged: (bool? val) {
                ref.read(_isCheckbox.notifier).state = val ?? false;
              },
            ),
            SizedBox(
              width: 210.w,
              child: CheckboxListTile(
                controlAffinity: ListTileControlAffinity.leading,
                // checkboxScaleFactor: 0.8,
                visualDensity: VisualDensity.compact,
                value: isCheckbox,
                onChanged: (bool? val) {
                  ref.read(_isCheckbox.notifier).state = val ?? false;
                },
                titleAlignment: ListTileTitleAlignment.top,
                title: Text("点击文字也可以选中"),
                subtitle: Text("副标题"),
                contentPadding: EdgeInsets.zero,
              ),
            ),
          ],
        ),
      ),

      bottomNavigationBar: CuNavigationBar(),
      // bottomNavigationBar: BottomAppBar(
      //   shape: const CircularNotchedRectangle(),
      //   color: Colors.blue, // 底部栏背景色
      //   child: IconTheme(
      //     data: IconThemeData(
      //       color: Theme.of(context).colorScheme.onPrimary,
      //     ), // 图标颜色
      //     child: Row(
      //       mainAxisAlignment: MainAxisAlignment.spaceAround,
      //       children: [
      //         // 左侧图标
      //         IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
      //         // 右侧图标（缺口会自动适配 FAB 位置）
      //         IconButton(icon: const Icon(Icons.search), onPressed: () {}),
      //         IconButton(icon: const Icon(Icons.favorite), onPressed: () {}),
      //       ],
      //     ),
      //   ),
      // ),
    );
  }
}
